<template>
  <div>
    <div class="app">
      <div class="top">
        <div class="pic"></div>
        <div class="mothod">三月排行榜</div>
        <div class="finish"></div>
      </div>
      <div class="rank">
        <div>
          <ul class="t_header">
            <li>排名</li>
            <li>用户ID</li>
            <li>得分</li>
          </ul>
          <div class="ranking" v-for="i in 10" :key="i">
            <ul class="rank_user">
              <li class="position">{{ i }}</li>
              <li class="rank_info">
                <img
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.774b9223b5a3526c61691fcc5ecb3145?rik=i7Rvf49CF7Zc4w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50041%2f7432.jpg_wh1200.jpg&ehk=969PSODhgWgR359dXTJbOB4maXRx3XZ536jGL%2fUyUy0%3d&risl=&pid=ImgRaw&r=0"
                  alt=""
                  class="rank_avatar"
                />
                <span class="rank_name">可好看好看好看好看交换空间和</span>
              </li>
              <li class="fraction">100</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.app {
  background-color: rgba(19, 157, 255, 1);
  border-radius: 8px 8px 0px 0px;
  position: relative;
  width: 403px;
  height: 63px;
  border: 1.5px solid rgba(19, 157, 255, 1);
  margin: 18.5px 0 912.5px 21.5px;
  opacity: 1;
  .top {
    display: flex;
    position: relative;
    .pic {
      width: 38px;
      height: 35px;
      margin: 14.5px 0 0 82.5px;
      background-color: #ccc;
    }
    .mothod {
      width: 96px;
      height: 29px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      font-family: eryaxindahei;
      font-weight: NaN;
      text-align: right;
      white-space: nowrap;
      line-height: 29px;
      margin: 16.5px 0 0 17px;
    }
    .finish {
      position: absolute;
      left: 323px;
      top: 6px;
      width: 63px;
      height: 53px;
      background-color: #ccc;
    }
  }
}
.rank {
  //   height: 679px;
  //   background-size: 403px 681px;
  width: 401.5px;
  position: absolute;
  border: 1px solid rgba(19, 157, 255, 1);
  border-right: 1.5px solid rgba(19, 157, 255, 1);
  border-bottom: 1.5px solid rgba(19, 157, 255, 1);
  border-radius: 10px;
  border-top: transparent;
  left: 0;
  top: 55px;
  padding-bottom: 27px;
  .t_header {
    width: 338px;
    height: 22px;
    margin: 31px 0 0 27px;
    display: flex;
    list-style: none;
    color: rgba(102, 102, 102, 1);
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    li:nth-of-type(2) {
      margin-left: 92px;
    }
    li:nth-of-type(3) {
      margin-left: 130px;
    }
  }
  .ranking {
    width: 334px;
    height: 33px;
    margin: 28px 0 0 27px;
    .rank_info {
      display: flex;
    }
    .rank_user {
      display: flex;
      list-style: none;
      text-align: left;
      .fraction {
        line-height: 32px;
      }
      .position {
        width: 31px;
        height: 33px;
        text-align: center;
      }
      li:first-of-type {
        color: rgba(25, 25, 25, 1);
        font-size: 17px;
        font-family: DINAlternate-Bold;
        font-weight: 700;
        text-align: center;
        line-height: 32px;
      }
      li:nth-of-type(2) {
        margin-left: 80px;
        width: 100px;
        color: rgba(25, 25, 25, 1);
        font-size: 17px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
      }
      li:nth-of-type(3) {
        margin-left: 98px;
        width: 51px;
        text-align: center;
        color: rgba(77, 77, 77, 1);
        font-size: 17px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
      }
      .rank_avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #f6acac;
      }
      .rank_name {
        margin-left: 15px;
        display: inline-block;
        width: 60px;

        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>

</style>